<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
         margin:0;
         padding:0;
        }
        body{
         height:3000px;
        }
        #box{
         height:300px;
         width:200px;
         background: #ccc;
         margin:1000px 50px;
        }
     </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //es6 兼容
        //IntersectionObserver 监听器  监听盒子(多个)与视口的交叉信息

        //创建监听器
        //默认：0  0-1
        // 1.一打开页面立刻监听1次
        // 2.露1个边监听1次
        // 3.完全离开监听1次
        //之后根据情况 2,3切换
        // 1
        // 1.一打开页面立刻监听1次
        // 2.完全出现监听1次
        // 3.离开露1个边监听1次
        //之后根据情况 2,3切换
        let ob=new IntersectionObserver((changes)=>{
            console.log(changes);//数组  每一项对象  包含各种信息
            //是否在视窗中出现  true出现   false没出现
            console.log(changes[0].isIntersecting);
            //监控的目标元素
            console.log(changes[0].target);
            if(changes[0].isIntersecting){
                //ob.unobserve(changes[0].target);
                ob.unobserve(box);//取消监听
            }
        },{
            threshold:[0.5]
        })

        //监听
        ob.observe(box)
    </script>
</body>
</html>